<template>
  <div :class="{ card: true, 'card-flat': flat }">
    <div class="card-header">
      <div class="card-header-date">
        <div class="date-start">{{ moment(startDate).format('M月D日') }}</div>
        <div class="date-end">{{ moment(endDate).format('M月D日') }}</div>
        <div class="date-week">{{ moment(startDate).format('dddd') }}</div>
      </div>
    </div>
    <div class="card-body">
      <h2>{{ title }}</h2>
      <div class="card-body-content">
        <div class="card-body-content-main">
          <div class="card-body-date">
            {{ moment(startDate).format('YYYY年MM月DD日') }}-{{ moment(endDate).format('DD日') }}
          </div>
          <div class="card-body-location">{{ location }}</div>
        </div>
        <div class="card-body-content-right">
          <slot name = 'right'></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import moment from 'moment'
import { SwipeCell } from 'vant'

export default {

  name: 'index',

  props: ['title', 'location', 'startDate', 'endDate', 'onJoin', 'status', 'flat'],

  data () {
    return {

    }
  },

  methods: {
    moment,
    handleJoin: function (e) {
      this.onJoin && this.onJoin(e)
    }
  },

  components: {
    SwipeCell
  }
}
</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 18px 0;
  border-radius: 6px;
  box-shadow:3px 0px 3px rgba(7,0,2,0.08);
  background-color: #fff;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 56px;
    top: 50%;
    margin-top: -28px;
    left: 0;
    border-radius: 0 4px 4px 0;
    background-color: #ddd;
  }

  &:nth-child(1n):before { background-color: #D6CCF1;  }
  &:nth-child(2n):before { background-color: #A8D8F0;  }
  &:nth-child(3n):before { background-color: #F1CF9C;  }
  &:nth-child(4n):before { background-color: #ABDBDC;  }

  &-flat {
    border-radius: 0 !important;

    &:before {
      display: none;
    }
  }

  &-header {
    display: flex;
    flex-shrink: 0;
    padding: 0 17px;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    // border-right: 1px solid #DEDEDE;

    .hairline(right, #DEDEDE);

    &-date {
      line-height: 1.3;

      .date-start {
        font-size: 16px;
        color: #275D8F;
        margin-bottom: 2px;
        font-weight: 500;
      } 
      .date-end {
        font-size: 13px;
        color: #275D8F;
        margin-bottom: 4px;
      }
      .date-week {
        font-size: 11px;
        color: #A2A2A2;
      }
    }
  }

  &-body {
    flex-grow: 1;
    padding-left: 17px;
    position: relative;

    h2 {
      font-size: 15px;
      color: #262626;
      margin-bottom: 7px;
      padding-right: 15px;
      line-height: 1.2;
    }

    &-content {
      display: flex;

      &-main {
        flex-grow: 1;
        min-width: 0;
      }

      &-right {
        flex-shrink: 0;
        margin-left: 10px;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;

        /deep/ .van-button {
          height: 26px;
          line-height: 24px;
          min-width: 86px;
          font-size: 15px;
          border-radius: 3px 0 0 3px;

          &[disabled] {
            background-color: #B0B0B0 !important;
            border-color: #B0B0B0 !important;
            color: #fff !important;
            pointer-events: none;
          }
        }
      }
    }

    .card-body-date {
      font-size: 13px;
      color: #737373;
      margin-bottom: 5px;
    }

    .card-body-location {
      font-size: 13px;
      color: #737373;
    }
  }
}

</style>